<!DOCTYPE html>
<!--
  需要的数据：
      1. blog
      2. comment
-->
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head lang="en">
  <meta charset="UTF-8">
  <title th:text="${blog.title}">Cum sociis</title>
  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="/css/footer.css">
  <link rel="stylesheet" href="/css/sidbar.css">
  <link rel="stylesheet" href="/css/blog.css">
  <link rel="stylesheet" href="/css/highlight.css">
  <script src="//cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <!--/*@thymesVar id="blog" type="club.banyuan.blog.bean.Blog"*/-->
      <a class="navbar-brand" th:href="'/blogger/' + ${blog.author.name}" href="/" th:text="${blog.author.name} + '的博客'">Lorem 的博客</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="/">首页</a></li>
        <li><a href="#">最近</a></li>
        <li><a href="#">归档</a></li>
        <li><a href="#">关于</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="搜索...">
      </form>
    </div>
  </div>
</nav>

<div class="container">

  <div class="row">

    <div class="col-sm-8 blog-item">
      <div class="page-header">
        <h2 th:text="${blog.title}">Cum sociis</h2>
        <p class="blog-post-meta" th:text="${#dates.format(blog.createdTime, 'yyyy-MM-dd')}">2015年2月3日 标签：<a href="#">Web开发</a></p>
      </div>

      <div class="post-content" th:utext="${blog.content}">
        <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic
          typography, images, and code are all supported.</p>
        <blockquote>
          <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo.
            Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        </blockquote>
        <h3>Sub-heading</h3>

        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <div class="highlight">
<pre><code class="language-js" data-lang="js"><span class="c1">// 引入jwt</span>
  <span class="kd">var</span> <span class="nx">jwt</span> <span class="o">=</span> <span class="nx">require</span><span
          class="p">(</span><span class="s1">'jwt-simple'</span><span class="p">);</span>

  <span class="c1">// 设置一个客户端不知道的secret</span>
  <span class="kd">var</span> <span class="nx">secret</span> <span class="o">=</span> <span class="s1">'hehe'</span>

  <span class="c1">// username -&gt; Token</span>
  <span class="nx">User</span><span class="p">.</span><span class="nx">methods</span><span class="p">.</span><span
          class="nx">getToken</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
  <span class="k">return</span> <span class="nx">jwt</span><span class="p">.</span><span class="nx">encode</span><span
          class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">username</span><span
          class="p">,</span> <span class="nx">secret</span><span class="p">);</span>
  <span class="p">}</span></code></pre>
        </div>
        <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus,
          tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>

        <h3>Sub-heading</h3>

        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum
          nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus
          commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <ul>
          <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
          <li>Donec id elit non mi porta gravida at eget metus.</li>
          <li>Nulla vitae elit libero, a pharetra augue.</li>
        </ul>
        <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
        <ol>
          <li>Vestibulum id ligula porta felis euismod semper.</li>
          <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
          <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
        </ol>
        <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
      </div>

      <nav>
        <ul class="pager">
          <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一篇</a></li>
          <li class="next"><a href="#">下一篇 <span aria-hidden="true">&rarr;</span></a></li>
        </ul>
      </nav>

      <section class="comment-list">
        <h4 class="page-header">文章评论</h4>
        <div class="create-comment clearfix">
            <form action="/blogs/blogId/comments" method="post" th:action="|/blogs/${blog.id}/comments|">
<!--              <form action="/blogs/${blog.id}/comments" method="post">-->
          <textarea id="content" name="content" rows="3"
                    class="form-control" placeholder="添加新评论"></textarea>
<!--          <a class="btn btn-success btn-sm btn-publish pull-right" type="submit" href="#">-->
            <input class="btn btn-success btn-sm btn-publish pull-right" type="submit" href="#">
            发布评论</input>
            </form>
        </div>
        <ul class="list-unstyled">
          <li class="clearfix content comment-item" th:each="comment: ${comments}">
            <img src="/img/catty.jpeg" alt="" class="avatar pull-left">
            <!--<div class="blog-post" th:each="blog: ${blogs.content}">
              <h3 class="blog-post-title"><a th:text="${blog.title}" th:href="@{'/blogs/' + ${blog.id}}">"${blog.title}"</a></h3>
              <p class="blog-post-meta">2015年2月3日 标签：<a href="#">Web开发</a></p>
              <p class="blog-post-content" th:text="${blog.content}">"${blog.content}"</p>
              -->
            <p>
              <a href="#" th:text="${comment.commenter.name}">"${comment.commenter.name}",</a>
              <span class="text-muted date" th:text="${comment.createdTime}"> "${comment.createdTime}"</span>
              <textarea disabled th:text="${comment.content}">"${comment.content}"</textarea>
            </p>
          </li>
          <li class="clearfix" th:remove="all">
            <img src="/img/catty.jpeg" alt="" class="avatar pull-left">
            <p class="content">
              <a href="#">David</a>
              <span class="text-muted date">, yesterday</span>
              Risus. Suspendisse faucibus orci et nunc. Nullam vehicula fermentum risus. Fusce felis nibh, dignissim
              vulputate, ultrices.</p>
          </li>
        </ul>
      </section>

    </div>


    <div class="col-sm-3 col-sm-offset-1">
      <div class="sidebar-module sidebar-module-inset">
        <div class="avatar">
          <img class="img-circle img-rounded img-thumbnail avatar" src="/img/catty.jpeg">
          <div>
            <h4>Lorem</h4>
            <a>lorem@example.com</a>
          </div>
        </div>
        <p>Ornare sapien rhoncus, nec mi hendrerit. Ante aliquam dui arcu, diam sodales erat felis dolor sed in, nec
          placerat non.</p>
      </div>
      <div class="sidebar-module">
        <h4>归档</h4>
        <ol class="list-unstyled">
          <li><a href="#">2015年03月</a></li>
          <li><a href="#">2015年02月</a></li>
          <li><a href="#">2015年01月</a></li>
          <li><a href="#">2014年12月</a></li>
          <li><a href="#">2014年11月</a></li>
          <li><a href="#">2014年10月</a></li>
          <li><a href="#">2014年09月</a></li>
          <li><a href="#">2014年08月</a></li>
          <li><a href="#">2014年07月</a></li>
        </ol>
      </div>
    </div>

  </div>

</div>

<footer>
  &copy; 2014 SomeCompany, Org &middot; <a href="#">隐私</a> &middot; <a href="#">条款</a>
</footer>

</body>
</html>
